import { useEffect, useRef, useState } from 'react'
import HomeHead from '../components/HomeHead'
import _ from '../assets/utils'
import './Home.scss'
import { Divider, DotLoading, Image, Swiper } from 'antd-mobile'
import { Link } from 'react-router-dom'
import api from '../api'
import NewsItem from '../components/NewsItem'
import SkeletonAgain from '../components/SkeletonAgain'
function Home() {
    /* 创建所需状态 */
    let [today, setToday] = useState(_.formatTime(null, '{0}{1}{2}')),
        [bannerData, setBannerData] = useState([]),
        [newsList, setNewsList] = useState([]);
    let loadMore = useRef();
    /* 第一次渲染完毕：向服务器发送数据请求 */
    useEffect(() => {
        (async function () {
            try {
                let { date, stories, top_stories } = await api.queryNewsLatest();
                setToday(date);
                setBannerData(top_stories);
                newsList.push({
                    date,
                    stories
                })
                setNewsList([...newsList]);
            } catch (_) { }

        })()
    }, [])
    /*  */
    useEffect(() => {
        let ob = new IntersectionObserver(async changes => {
            let { isIntersecting } = changes[0];
            if (isIntersecting) {
                //加载更多的按钮出现在视口中，[也就是触底了]
                try {
                    let time = newsList[newsList.length - 1]['date'];
                    let res = await api.queryNewsBefore(time)
                    newsList.push(res);
                    setNewsList([...newsList]);
                } catch (_) { }
            }
        })
        let loadMoreBox = loadMore.current
        ob.observe(loadMoreBox);
        //在组件销毁释放的时候：手动销毁监听器
        return () => {
            ob.unobserve(loadMoreBox);
            ob = null
        }
    }, [])
    return <div className="home-box">
        {/* 头部 */}
        <HomeHead today={today} />
        {/* 轮播图 */}
        <div className="swiper-box">
            {bannerData.length > 0 ? <Swiper autoplay={true} loop={true}>
                {bannerData.map(item => {
                    let { id, image, title, hint } = item
                    return <Swiper.Item key={id}>
                        <Link to={{
                            pathname: `/detail/${id}`
                        }}>
                            <Image lazy src={image} />
                            <div className='desc'>
                                <h3 className='title'>{title}</h3>
                                <p className='author'>{hint}</p>
                            </div>
                        </Link>
                    </Swiper.Item>
                })}
            </Swiper> : null}
        </div>
        {/* 新闻列表 */}
        {newsList.length === 0 ? <SkeletonAgain /> : <>{newsList.map((item, index) => {
            let { date, stories } = item
            return <div className="news-box" key={date}>
                {index !== 0 ? <Divider contentPosition='left'>{_.formatTime(date, '{1}月{2}日')}</Divider> : null}

                <div className="list">
                    {stories.map(cur => {
                        return <NewsItem info={cur} key={cur.id} />
                    })}
                </div>
            </div>

        })}</>}


        {/* 加载更多 */}
        <div className="loadmore-box" ref={loadMore} style={{
            display: newsList.length > 0 ? 'block' : 'none'
        }}>
            <DotLoading />
            数据加载中
        </div>
    </div>
}
export default Home